<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Button Template</title>
    <meta charset="UTF-8" />
    <!-- <script type="text/javascript" src="src/index.js"></script>
    <link rel="stylesheet" href="src/styles.css" /> -->
    <template id="my-radio">
      <label for="rad"><slot></slot></label>
      <input type="radio" id="rad" name="test" />
    </template>

    <script type="text/javascript">
      customElements.define(
        "my-radio",
        class extends HTMLElement {
          constructor() {
            super();
            let template = document.getElementById("my-radio");
            let templateContent = template.content;

            const shadowRoot = this.attachShadow({ mode: "open" }).appendChild(
              templateContent.cloneNode(true)
            );
          }
        }
      );
    </script>
  </head>

  <body>
    <main>
      <h1>Test page</h1>
      <my-radio>Test radio 1</my-radio>
      <my-radio>Test radio 2</my-radio>
    </main>
    <script>
      UnitTest = {
        ruleIds: ["WCAG20_Input_RadioChkInFieldSet"],
        results: [
          {
            "ruleId": "WCAG20_Input_RadioChkInFieldSet",
            "value": [
              "INFORMATION",
              "FAIL"
            ],
            "path": {
              "dom": "/html[1]/body[1]/main[1]/my-radio[1]/#document-fragment[1]/input[1]",
              "aria": "/document[1]/main[1]/radio[1]"
            },
            "reasonId": "Fail_NotGroupedOtherNotGrouped",
            "message": "Radio input and others with the name \"test\" are not grouped together",
            "messageArgs": [
              "Radio",
              "test"
            ],
            "apiArgs": [],
            "category": "Accessibility"
          },
          {
            "ruleId": "WCAG20_Input_RadioChkInFieldSet",
            "value": [
              "INFORMATION",
              "FAIL"
            ],
            "path": {
              "dom": "/html[1]/body[1]/main[1]/my-radio[2]/#document-fragment[1]/input[1]",
              "aria": "/document[1]/main[1]/radio[2]"
            },
            "reasonId": "Fail_NotGroupedOtherNotGrouped",
            "message": "Radio input and others with the name \"test\" are not grouped together",
            "messageArgs": [
              "Radio",
              "test"
            ],
            "apiArgs": [],
            "category": "Accessibility"
          }
        ]
      };
    </script>
  </body>
</html>
